<template>
	<view class="ba-container">
		<view style="background-color: #ffffff;padding: 0 40rpx;">
			<view style="width: 100%; height: 30rpx;"></view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="真实姓名" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请填写您的真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="IDnumber">
					<uni-easyinput type="text" v-model="formData.IDnumber" placeholder="请填写您的身份证号" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender">
					<view class="pciker-item">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view :class="index!=0?'chose-input':'uni-input'">{{array[index]}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="出生日期" name="birthday">
					<view class="form-item-div">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="width: 100%;height: 100%;">{{date}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone">
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入您的联系电话" />
				</uni-forms-item>
				<uni-forms-item label="现居地" name="address">
					<uni-easyinput type="text" v-model="formData.address" placeholder="请填写现居地" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms label-width="72">
				<uni-forms-item label="与本人关系" name="relationship">
					<view class="pciker-item">
						<picker @change="bindRelationChange" :value="relationIndex" :range="relationArray">
							<view :class="relationIndex!=0?'chose-input':'uni-input'">{{relationArray[relationIndex]}}
							</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="设为默认" name="isDefault">
					<view class="form-item-div" style="justify-content: end;">
						<switch  style="transform:scale(0.7);" color="#2984f8" @change='setDefault'/>
					</view>	
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="background-color: #ffffff; height: 160rpx;padding-top: 20rpx;">
			<button @click="submit" class="submitBtn">保存</button>
		</view>
	</view>

</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		onReady
	} from '@dcloudio/uni-app'
import { addRelationApi } from '../../../api/familymembers';
	const index = ref(0);
	const relationIndex = ref(0);
	const array = ref(['请选择您的性别', '男', '女']);
	const relationArray = ref(['请选择和您的关系', '本人', '父母', '配偶', '姐妹', '兄弟'])
	const form = ref(null);
	const currentDate = getDate({
		format: true
	});
	const date = ref(currentDate)
	const rules = {
		name: {
			rules: [{
					required: true,
					errorMessage: '请输入姓名',
				}
			]
		},
		IDnumber: {
			rules: [{
					required: true,
					errorMessage: '请输入身份证号',
				},
				{
					minLength: 18,
					maxLength: 18,
					errorMessage: '身份证号码格式不正确',
				}
			]
		},
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入电话号码',
				},
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: '电话号码码格式不正确',
				}
			]
		},
	}

	onReady(() => {
		form.value?.setRules(rules)
	})

	const formData = ref({
		gender: '男',
		residentId:'686f8c4f44c7c46f75e72a54'
	});
	const startDate = computed(() => {
		return getDate('start');
	})
	const endDate = computed(() => {
		return getDate('end');
	})


	function submit() {
		form.value.validate().then(res => {
			addRelation({...formData.value});
			
		}).catch(err => {
		});
	}


	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	function bindPickerChange(event) {
		index.value = event.detail.value;
		if (index.value != 0) {
			formData.value.gender = (array.value)[index.value]
		}
	};

	function bindRelationChange(event) {
		relationIndex.value = event.detail.value;
		console.log(relationIndex.value);
		if (relationIndex.value != 0) {
			formData.value.reaction = (relationArray.value)[relationIndex.value]
		}

	};

	function bindDateChange(event) {
		date.value = event.detail.value
		if (relationIndex) {
			formData.value.birthday = date.value;
		}

	};
	function setDefault(event){
		formData.value.isDefault = event.detail.value;
	}
	function addRelation(data){
		addRelationApi(data).then(res=>{
			if(res.code == 200){
				uni.showModal({
					title: '提示',
					content: '添加成功',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}else{
				uni.showModal({
					title: '警告',
					content: '添加失败',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		})
	}
	
</script>

<style scoped lang="scss">
	.ba-container {
		min-height: 100vh;
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.pciker-item {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 14rpx;
			height: 24rpx;
		}
	}

	.chose-input {
		width: 100%;
		height: 100%;
	}

	.uni-input {
		width: 100%;
		height: 100%;
		color: #999;
	}

	.submitBtn {
		width: 670rpx;
		height: 88rpx;
		color: #ffffff;
		background-color: #2984f8;
	}
	.form-item-div{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}
</style>